<template>
  <div>
    <div class="bank-card">
      <footer class="share-btn">
        <mt-button>我要申请</mt-button>
      </footer>
      <div class="bank-item after-line">
        <div class="content">
          <div class="image" :style="{backgroundImage: 'url(' + bankCard.card_image + ')'}"></div>
          <div class="section">
            <div class="title">{{bankCard.name}}</div>
            <div class="desc">{{bankCard.owners}}人拥有</div>
          </div>
        </div>
      </div>
      <div class="detail after-line">
        <div class="title">权益详情</div>
        <div class="content" v-html="bankCard.card_rights"></div>
      </div>
      <div class="detail after-line">
        <div class="title">小惠推荐理由</div>
        <div class="content" v-html="bankCard.comment"></div>
      </div>
      <mt-button class="dispute" plain @click.native="showCorrection">我要纠错</mt-button>
      <correction ref="correction"></correction>
      <div class="cell-list" v-if="bankCard.act_list.length">
        <div class="title">历史活动</div>
        <div class="cell"
          v-for="(v, k) in bankCard.act_list" :key="k"
          @click="routeToAct(v.id)"
        >
          <!-- <span>2017/6/6-2017/9/30</span> -->
          <p>{{v.name}}</p>
          <i class="circle-go"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Correction from '@/components/Correction'

  export default {
    name: 'BankCard',
    components: {
      Correction
    },
    data () {
      return {
        bankCard: []
      }
    },
    methods: {
      getInfo (id) {
        let params = {card_id: id}
        this.$post('/vue/card/detail', params).then(data => {
          this.bankCard = data
        })
      },
      routeToAct (id) {
        this.$router.push({name: 'ActivityDetail', params: {id: id}})
      },
      showCorrection () {
        this.$refs.correction.popShow1 = true
        this.$refs.correction.column = `${this.bankCard.name} - ID:${this.bankCard.id}`
      }
    },
    mounted () {
      this.getInfo(this.$route.params.id)
    }
  }
</script>

<style lang="less">
  @c-124: rgb(124, 124, 124);
  @c-169: rgb(169, 169, 169);
  @c-226: rgb(226, 226, 226);
  @c-235: rgb(235, 235, 235);
  @c-246: rgb(246, 246, 246);
  @c-red: rgb(217, 117, 99);
  @c-blue: rgb(108, 184, 222);

  .bank-card {
    background-color: #FFF;
    padding-bottom: 55px;
    min-height: calc(~'100vh - 55px');
    overflow-x: hidden;
    overflow-y: scroll;
    & > div.after-line::after {
      display: block;
      content: '';
      width: 100vw;
      height: 8px;
      background-color: rgb(240, 244, 247);
      margin-left: -12px;
    }
    & > div:last-child::after {
      display: none;
    }
    .bank-item {
      padding: 12px 12px 0;
      text-align: left;
      background: #FFF;
      .content {
        padding-bottom: 12px;
        display: flex;
        align-items: center;
        align-content: flex-start;
        justify-content: space-between;
        .image {
          display: block;
          flex: 0 0 auto;
          width: 32.47%;
          padding-bottom: 20.5%;
          height: 0;
          border-radius: 8px;
          background-image: url('/src/assets/error.png');
          background-size: 100% 100%;
        }
        .section {
          display: block;
          flex: 0 0 auto;
          width: 71%;
          margin-left: 3.3%;
          padding-right: 3.3%;
          .title {
            font-size: 15px;
            line-height: 24px;
            font-weight: bold;
            color: @c-124;
          }
          .desc {
            font-size: 12px;
            line-height: 20px;
            color: @c-169;
            margin-top: 12px;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
      .footer {
        &:extend(.report-list .report-item .content);
        border: 0;
        margin-top: 4px;
        font-size: 0;
        padding-right: 12px;
        .mr-8 {
          margin-right: 8px;
        }
        .item {
          flex: 0 0 auto;
          img {
            width: 24px;
            height: 24px;
            display: inline-block;
            vertical-align: middle;
            &.head-img {
              margin-left: -12px;
              border-radius: 100%;
              box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5);
              &:first-child {
                margin-left: 0;
              }
            }
          }
          .v-line {
            width: 1px;
            height: 20px;
            background-color: @c-226;
            margin: 0 12px;
            display: inline-block;
            vertical-align: middle;
          }
        }
        .text {
          font-size: 12px;
          line-height: 24px;
          color: @c-169;
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
    .detail {
      padding: 12px 12px 0;
      text-align: left;
      .title {
        font-size: 13px;
        line-height: 24px;
        font-weight: bold;
        color: @c-124;
      }
      .content {
        margin-top: 8px;
        font-size: 12px;
        line-height: 24px;
        color: @c-124;
        margin-bottom: 12px;
      }
    }
    .cell-list {
      padding: 12px 0 0 12px;
      text-align: left;
      .title {
        font-size: 13px;
        line-height: 24px;
        font-weight: bold;
        color: @c-124;
      }
      .cell {
        padding: 8px 12px 8px 0;
        border-bottom: 1px solid @c-235;
        display: flex;
        align-items: flex-start;
        align-content: flex-start;
        justify-content: space-between;
        transition: all .25s;
        span, p {
          font-size: 12px;
          line-height: 24px;
          color: @c-124;
          display: block;
          flex: 0 0 auto;
          width: 32%;
        }
        p {
          width: 55%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .circle-go {
          flex: 0 0 auto;
          width: 6.84%;
          height: 0;
          padding-bottom: 6.84%;
          background-image: url('/src/assets/icons/circle-go.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
        &:active {
          background-color: @c-246;
        }
      }
    }
    .share-btn {
      padding: 8px;
      border-top: 1px solid @c-226;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #FFF;
      z-index: 2;
      img {
        width: 24px;
        height: 24px;
      }
      .mint-button {
        height: auto;
        line-height: 0;
        padding: 7px 0;
        width: 168px;
        text-align: center;
        background-color: @c-blue;
        border-radius: 20px;
        .mint-button-icon {
          line-height: 0;
        }
        .mint-button-text {
          font-size: 13px;
          line-height: 24px;
          color: #FFF;
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
    .dispute {
      display: block;
      width: 120px;
      height: 32px;
      margin: 16px auto;
      font-size: 13px;
      line-height: 24px;
      color: #a9a9a9;
      border-color: #e2e2e2;
      border-radius: 16px;
      background-color: #FFF;
    }
  }
</style>